﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <LINK type="text/css" href="css/sunny/jquery-ui-1.8.12.custom.css" rel="stylesheet" />	
    <LINK type="text/css" href="css/sunny/special.css" rel="stylesheet" />

    <style>
        .slider-button
        {
            background-image: url(slider-button.png);
            background-position: center;
            background-repeat: no-repeat;
            width: 101px;
            height: 97px;
        }
        
        .slider-base
        {
            background-image: url(slider-base.png);
            background-position: center;
            background-repeat: no-repeat;
            width: 124px;
            height: 396px;
        }
        
        .rotate 
        {

            /* Safari */
            -webkit-transform: rotate(-90deg);

            /* Firefox */
            -moz-transform: rotate(-90deg);

            /* Internet Explorer */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    
        }
        
        .rotate 
        {
            display: block;
            position: absolute;
            top: 195px;
            left: -185px;
            font-size: 26px;
        }
        
        span.rotate 
        {
            width: 396px;
            text-align: center;
        }
        
        .demo_slider
        {
            position:relative; 
            float: left;
        }
        
        .demo_button
        {
            position:relative;
            left:3px;
        }
    </style>

    <div id="demos"></div>

<!--
    <div class="demo_slider">
        <span class="rotate">Character Demo</span>
        <div class="slider-base">
            <div class="demo_button" style="top:140px;">
                <a href="#" ><div class="slider-button"></div></a>
            </div>
        </div>
    </div>

    <div class="demo_slider">
        <span class="rotate">Narration Demo</span>
        <div class="slider-base">
            <div class="demo_button" style="top:230px;">
                <a href="#" ><div class="slider-button"></div></a>
            </div>
        </div>
    </div>

    <div class="demo_slider">
        <span class="rotate">Commercial Demo</span>
        <div class="slider-base">
            <div  class="demo_button" style="top:180px;">
                <a href="#" ><div class="slider-button"></div></a>
            </div>
        </div>
    </div>
    -->
    <script type="text/javascript">
        function randomFromTo(from, to) {
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

        // Get userprefs


        var demos = "Narration Demo,Character Demo,Commercial Demo";
        var links = "http://infoconcepts.com,http://microsoft.com,#";

        var demo_titles = demos.split(",");
        var demo_links = links.split(",");

        var content = document.getElementById('demos');

        content.innerHTML = "";

        for (var i in demo_titles) {
            content.innerHTML += "<div class=\"demo_slider\"><span class=\"rotate\">" + demo_titles[i] + "</span><div class=\"slider-base\"><div class=\"demo_button\" style=\"top:" + randomFromTo(100, 250) + "px;\"><a href=\"" + demo_links[i] + "\"><div class=\"slider-button\"></div></a></div></div></div>";
        }


        
    </script>

</body>
</html>
